<template>
  <el-tabs v-model="active"
           ref="tabs"
           class="bi-packages flex-1 flex flex-col">
    <el-tab-pane :name="tab.label"
                 v-for="(tab,index) in currentLimits"
                 lazy
                 :key="index">
      <template v-slot:label>
        <span>{{tab.label}}</span>
        <span class="bi-packages-tab-tag">
          {{tab.value}}
        </span>
      </template>
      <Resource :list="resources[tab.label]"
                v-on="$listeners"
                v-loading="loading" />
    </el-tab-pane>

  </el-tabs>
</template>

<script>
import Resource from './resource.vue'
import { assetsIntegration, assetsFields } from '@/components/storybook/settings/widget'
import { get, values } from 'lodash'

export default {
  name: 'BiPackages',
  components: {
    Resource
  },
  props: {
    name: String,
    limits: Object
  },
  data () {
    return {
      active: undefined,
      resources: {},
      loading: false
    }
  },

  computed: {
    code () {
      return this.limits.dimension1
    },
    currentLimits () {
      if (this.limits) {
        let result = []
        for (let key in this.limits) {
          if (this.limits[key] && key !== 'dimension1' && this.limits[key] && key !== 'icon') {
            result.push({
              label:assetsFields[key].value,
              value:this.limits[key],
              index:assetsFields[key].sort
            })
          }
        }
        return result.sort((a,b) => {
          return a.index - b.index
        })
      }
    }
  },
  watch: {
    currentLimits: {
      handler () {
        if (this.currentLimits && this.currentLimits.length) this.active = this.currentLimits[0]['label']
      },
      deep: true,
      immediate: true
    },
    async active (activeName) {
      try {
        if (activeName !== '0') {
          this.loading = true
          const queryId = assetsIntegration[activeName]
          if (this.resources.hasOwnProperty(activeName)) {
            return
          }
          this.resources[activeName] = values(await this.getResource(this.code, queryId)).sort((a, b) => get(a, 'name', '').charCodeAt(0) - get(b, 'name', '').charCodeAt(0))
        }
      } finally {
        this.loading = false
      }
    }
  },
  methods: {

    async getResource (code, queryId) {
      const { postInfoForGetDataApi } = this.$interface.reports
      const params = {
        // eslint-disable-next-line no-useless-escape
        drillThrough: `\"integration_name\"= '${code}'`,
        gadgetId: '76c35523-5a44-42b6-875d-6b00215349e7',
        pageId: '',
        queryId,
        showQuery: true,
        slicer: {}
      }
      let { data: response } = await postInfoForGetDataApi(params)
      if (response.code !== 0) {
        throw response.msg
      }
      return response.data || []
    }
  }
}
</script>

<style lang="scss" scoped>
.bi-packages.el-tabs {
  border-radius: 4px;
  border: 1px solid #f0f0f0;

  ::v-deep .el-tabs__header {
    margin-bottom: 0;
    .el-tabs__nav-scroll {
      padding: 0 16px;
    }
    .el-tabs__item {
      font-weight: 700;
      .bi-packages-tab-tag {
        display: inline-flex;
        align-items: center;
        height: 14px;
        padding: 0 8px;
        background-color: #f0f0f0;
        border-radius: 7px;
        margin-left: 4px;
        font-size: 12px;
      }
    }
  }
  ::v-deep .el-tabs__content {
    position: relative;
    flex: 1;
    .el-tab-pane {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
